<template>
	<!--html-->
	<div id="now_play">
		<div class="now_box">
			<ul>
				<li v-for="i in all_img" @click="send_id(i.id)">
					<div class="film_item">
						<div class="film_img">
							<router-link to=""><img :src="i.poster.origin" /></router-link>
						</div>
						<div class="film_info">
							<div class="film_name">
								<span>{{i.name}}</span>
								<span class="grade">{{i.grade}}</span>
							</div>
							<div class="film_title">{{i.intro}}</div>
							<div class="film_count">
								<span class="num_clolor">{{i.cinemaCount}}</span><span class="num">家影院上映</span>
								<span class="num_clolor">{{i.watchCount}}</span><span>人购票</span>
							</div>
						</div>
					</div>
				</li>
			</ul>
		</div>
	</div>
</template>

<script>
	//js
	import router from "../router/my_router";
	import axios from "axios";
	export default {
		created: function() {
			var that = this;
			axios.get('http://m.maizuo.com/v4/api/film/coming-soon?', {
					params: {
						page: that.page_num,
					}
				})
				.then(function(res) {
					for(var i = 0; i < res.data.data.films.length; i++) {
						that.all_img.push(res.data.data.films[i])
					}

				})
				.catch(function(error) {
					console.log(error);
				});
		},
		beforeMount: function() {
			this.$store.commit("toggleTitle", "即将上映")
		},
		mounted: function() {
			var that = this;
			document.addEventListener("scroll", this.change_page)
		},
		
		data: function() {
			return {
				all_img: [],
				page_num: 1,
			}
		},
		methods: {
			send_id: function(id) {
				this.$router.push({
					path: "/film_info",
					query: {
						my_id: id
					}
				})
			},
			change_page: function() {
				this.page_num += 1;
				var that = this;
				axios.get('http://m.maizuo.com/v4/api/film/coming-soon?', {
						params: {
							page: that.page_num,
						}
					})
					.then(function(res) {
						for(var i = 0; i < res.data.data.films.length; i++) {
							that.all_img.push(res.data.data.films[i])
						}
					})
			}
		}
	}
</script>

<style lang="scss">
	/*lang="scss" 识别成scss*/
	/*引入其他的scss*/
	
	@import "../scss/now_play.scss";
	/*css*/
</style>